<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="团长招募" placeholder bgColor="#fff"></u-navbar>
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="u-flex">
          <image style="width: 100rpx;height: 100rpx;margin-right: 28rpx;" :src="item.avatar" mode="aspectFill" />
          <view>
            <view class="u-m-b-14">{{ item.nickName }}</view>
            <view class="u-font-24" style="color: #818181;">{{ item.phonenumber }}</view>
          </view>
        </view>
        <view>
          <view class="u-font-24 u-m-b-22 u-text-right" style="color: #56CB03;">比例{{ item.commissionRate * 100 }}%</view>
          <view class="u-flex" style="gap: 8rpx;">
            <view class="action" @click="jumpTo('/pages/my/recruitmentAdd?id='+item.userId)">编辑</view>
            <view class="action" style="color: #E20300;border-color: #E20300;" @click="changeRole(item)">删除</view>
          </view>
        </view>
      </view>
    </view>
    <a-empty v-if="!list.length"></a-empty>
    <view class="btn" @click="jumpTo('/pages/my/recruitmentAdd')">
      <image style="width: 28rpx;height: 28rpx;" src="../../static/my/recruitment.png" />
      <text>新建团长</text>
    </view>
  </view>
</template>

<script>
import { getRecruitmentList, delLeader } from '@/api/index'

export default {
  data() {
    return {
      pageNum: 1,
      list: [],
      pages: 0,
    };
  },
  onShow() {
    this.pageNum = 1
    this.list = []
    this.getPage()
  },
  methods: {
    changeRole(user) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '确定取消此团长资格?',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if(confirm) {
            delLeader({id: user.userId}).then(res => {
              uni.showToast({
                icon: 'none',
                title: '取消成功'
              })
              that.getPage()
            })
          }
        }
      })
    },
    getPage() {
      uni.showLoading({ mask: true })
      getRecruitmentList({pageNum: this.pageNum, pageSize: 20, parentId: uni.getStorageSync('userInfo').userId, postId: '3', pcPartner: '2' }).then(res => {
        uni.hideLoading()
        this.list = [...this.list, ...res.rows]
        this.pages = Math.ceil(res.total / 20)
      })
    }
  },
  onReachBottom() {
    if(this.pageNum < this.pages) {
      this.pageNum++
      this.getPage()
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .list {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    width: 702rpx;
    margin: 12rpx auto 120rpx;
    .item {
      width: 100%;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 16rpx 18rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #000000;
      .action {
        width: 80rpx;
        height: 32rpx;
        line-height: 28rpx;
        text-align: center;
        background: #FFFFFF;
        border-radius: 200rpx;
        border: 2rpx solid #000000;
        font-size: 20rpx;
        color: #000000;
      }
    }
  }
  .btn {
    width: 440rpx;
    height: 90rpx;
    background: #56CB03;
    border-radius: 200rpx;
    border: 2rpx solid #56CB03;
    font-size: 28rpx;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    margin: 0 auto;
  }
}
</style>
